<template>
    <div>

      <!--导航栏-->
      <div class="a2">
        <div class="a7">
          <div class="a3">
            <div class="a4"><img src="../../assets/a1.png" height="30" width="110" class="aa"/></div>
            <div class="a5">
              <button class="a5a">
                <router-link :to="'Home'">首页</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyActive'">我的活动</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyTribe'">我的部落</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'MyInfo'">个人信息</router-link>
              </button>
              <button class="a5a">
                <router-link :to="'SecondClass'">第二课堂成绩单</router-link>
              </button>
              <button class="a5a">APP下载</button>
            </div>
            <div class="a6">
              <div style="width: 300px"></div>
              <div class="a6a"></div>
              <div class="a6a"></div>
              <div class="a6aa"></div>
            </div>
          </div>
        </div>
      </div>

<div class="f1">
  <div class="f2">到梦空间平台提供多样化服务清单</div>
  <div class="f3"><div class="f4"></div></div>
</div>


<div class="r1">
<div class="r2">
  <div style="color: gray">
<div style="padding-left: 40px">为满足不同高校用户差异化的需求，到梦空间平台在提供基本服务的基础上，进一步拓宽范围，提供包括数据互联互通、个性化定制等多样化服务,</div>
  <div style="padding-top: 10px">具体如下：</div>
  </div>

  <div style="margin-top: 50px;font-size: 22px;font-weight: bolder">一、基础服务</div>
  <div style="margin-top: 30px"><img src="../../assets/c4.png" height="503" width="1200"/></div>
  <p style="color: gray;margin-top: 30px">到梦空间平台基础服务以集中化管理方式为主，学校负责日常活动、部落、学分的管理外，系统的升级维护等工作由到梦空间负责;学校如有数据本地化或自主开发需求可与到梦空间平台联系</p>

  <div style="margin-top: 50px;font-size: 22px;font-weight: bolder">二、扩展服务</div>
  <div style="margin-top: 50px;color:gray;">1.数据互联互通服务</div>
  <div><img src="../../assets/c5.png" height="535" width="1200"/></div>
  <p style="color: gray;margin-top: 30px">到梦空间平台可实现与学校教务处、信息中心等系统的互联互通，可实现学生基本信息同步维护，课程表、成绩等便捷查询;到梦空间平台产生的活动、部落、学分等数据也可同步至学校，便于学校对大数据进行挖掘分析。</p>

  <div style="margin-top: 50px;color:gray;">2.自助打印机服务(学校定制，第三企业提供)</div>
  <div style="margin-top: 50px"><img src="../../assets/c6.png" height="469" width="1200"/></div>
  <p style="color: gray;margin-top: 30px">目前北京科技大学、山东工商学院、桂林理工大学、东莞职业技术学院、广东青年职业学院等数十家学校已购买或列入采购计划。</p>

  <div style="margin-top: 50px;color:gray;">3.第二课堂大数据展示中心服务</div>
  <div style="margin-top: 50px"><img src="../../assets/c7.png" height="500" width="1200"/></div>
  <p style="color: gray;margin-top: 30px">到梦空间提供第二课堂各类数据的API接口，学校可定制或自行开发"第二课堂大数据展示中心"系统，全面展现本校第二课堂大数据。</p>
</div>
</div>



      <!--页尾-->
      <div class="c1">
        <div class="c2">
          <div class="c3">
            <div>到梦简介</div>
            <div>到梦协议</div>
            <div>到梦服务</div>
            <div>第二课堂全国活动查询</div>
            <div>第二课堂全国活动证书查询</div>
            <div>校企共建</div>
            <div>问题与帮助</div>
            <div>联系我们</div>
            <div>APP使用说明</div>
            <div>盗梦空间使用章程和制度</div>
          </div>
          <div class="c4"></div>
          <div class="c5">
            <div>京公网安备11010802024175 到梦空间系统</div>
            <div>2016-2021 Copyright©全国共青团研究中心</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "DreamService"
    }
</script>

<style scoped>
  p{
    text-indent: 2em;
  }
  a{
    color: black;
    text-decoration: none;
  }
  button{
    border: none;
    background-color: transparent;
    box-shadow: none;
  }
  .a2{
    position: relative;
  }
  .a7{
    width: 100%;
    height: 60px;
    position: fixed;
    z-index: 2;
    background:#FFFFFF ;
    box-shadow: 0px 5px 10px 0 #E2E2E2;
  }
  .a3{
    display: flex;
    width: 1210px;
    height: 50px;
    margin: auto;
  }
  .a4{
    width: 100px;
    height: 55px;
    display: grid;
    align-items: center;
    cursor: pointer;
  }
  .a5{
    flex: 1;
    font-size: 13px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .a5a:hover{
    cursor: pointer;
    color: gold;
  }
  .a5a>a:hover{
    cursor: pointer;
    color: gold;
  }
  .a6{
    font-size: 13px;
    width: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .a6a:hover{
    cursor: pointer;
  }
  .a6aa:hover{
    cursor: pointer;
    color: darkgray;
  }
  .f1{
    position: absolute;
    margin-top: 130px;
    width: 100%;

  }
  .f2{
    margin: auto;
    width: 500px;
    height: 60px;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .f2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1%;
    height: 6%;
    border: 1px solid transparent;
    border-left-color: orange;
    border-top-color: orange;
    z-index: -1;
  }
  .f2::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1%;
    height: 6%;
    border: 1px solid transparent;
    border-right-color: orange;
    border-bottom-color: orange;
    z-index: -1;
  }
  .f3{
    width: 450px;
    margin: auto;
  }
  .f4{
    width: 60px;
    border-top: 4px solid orange;
  }
  .r1{

    position: absolute;
    width: 100%;
    margin-top: 280px;
  }
  .r2{
    width: 1210px;
    height: 2900px;
    margin: auto;
  }
  .c1{
    background: #D6D8DA;
    margin-top: 3200px;
    width: 100%;
    height: 100px;
    position: absolute;
  }
  .c2{
    width: 1210px;
    margin: auto;
  }
  .c3{
    height: 40px;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    align-items: center;
    color: black;
    cursor: pointer;
  }
  .c4{
    border-bottom: 1px solid darkgray;
    margin-top: 10px;
  }
  .c5{
    width: 700px;
    margin: auto;
    margin-top: 20px;
    display: flex;
    font-size: 13px;
    justify-content: space-evenly;
    color: black;
  }
</style>
